<template>
    <PageTabelLayout>
        <template #pageHeader>
            <div class="my-header" v-if="headerShow">
                <a-form size="small" :model="searchData" auto-label-width layout="inline">
                    <a-form-item label="流转卡号" label-col-flex="70px" :style="{width:'310px'}">
                        <a-input class="bacClass"  allow-clear v-model="searchData.flowCardCode" />
                    </a-form-item>
                    <a-form-item label="计划单号" label-col-flex="70px" :style="{width:'310px'}">
                        <a-input class="bacClass"  allow-clear v-model="searchData.planOrderCode" />
                    </a-form-item>
                    <a-form-item label="组缸日期" label-col-flex="70px" :style="{width:'310px'}">
                        <a-range-picker  popup-container="html"  class="bacClass"  allow-clear @change="changePickerDate" />
                    </a-form-item> 
                    <a-form-item label="设备编号" label-col-flex="70px" :style="{width:'310px'}">
                        <a-input class="bacClass"  allow-clear v-model="searchData.machineCode" />
                    </a-form-item>
                </a-form>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
            <div class="my-tool-bar" style="padding-bottom: 10px;">
                <Toolbar :items="['查询']" @select="selectHandler" />
            </div>
        </template>
        <template #pageTabel>
            <a-spin :loading="pageLoading.value" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                    @grid-ready="gridReady" style="height: 100%;" class='ag-theme-alpine' :defaultColDef="defaultColDef"
                    :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData"
                    @columnResized="onColumnResized" @columnMoved="onColumnMoved"></AgGridVuesCopys>
            </a-spin>
        </template>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
            @change="changePage" @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
            :page-size="pagination.pageSize" :current="pagination.page" />
    </PageTabelLayout>
</template>

<script  lang="ts">
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { ref, reactive, onMounted } from 'vue';

import { localeText } from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import { usePagination, useTable } from '@/hooks/table';
import { vatExhaut } from '@/api/DyeingshopManagement/DyeVatSchedu';
import { pagingList } from "@/api/paging";
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

export default {
    name: "outboundInfo",
    setup() {
        const vatExhautApi = vatExhaut();
        let headerShow = ref<boolean>(true);
        const gridOption = ref();
        const searchData = reactive<{
            flowCardCode: string;
            planOrderCode: string;
            productionDate: string;
            productionDate1: string;
            machineCode: string
        }>({
            flowCardCode: '',
            planOrderCode: '',
            productionDate: '',
            productionDate1: '',
            machineCode: ''
        });
        const table = useTable();
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
            colState.value = params.columnApi
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width: 150,
        };
        emitter.on("refresh-outboundInfo", () => {
            selectHandler();
        });

        const pageLoading = ref(false)
        const doRefresh = async () => {
            pageLoading.value = true
            // updateGridState01()
            await vatExhautApi.getFindOutBound({
                page: pagination.page,
                limit: pagination.pageSize,
            }, {
                ...searchData
            }).then(({ data: { data }, code }: any) => {
                if (code === 200) {
                    // gridOption.value.sizeColumnsToFit();
                    table.handleSuccess(data.records);
                    gridOption.value.setRowData(data.records);
                    total.value = data.total;
                }
            })
                .catch(console.log).finally(() => {
                    pageLoading.value = false
                })
        };
        const changePickerDate = (data: any) => {
            searchData.productionDate = data ? data[0] : '';
            searchData.productionDate1 = data ? data[1] : '';
        }
        const selectHandler = () => {
            pagination.page = 1;
            doRefresh();
        };
        let cfsValue: any[] = [
            // {
            //     headerName: '序号',
            //     field: 'recordDate',
            // },
            {
                headerName: '流转卡号',
                field: 'flowCardCode',
            },
            {
                headerName: '计划单号',
                field: 'planOrderCode',
            },
            {
                headerName: '客户名称',
                field: 'customName',
            },
            {
                headerName: '色号',
                field: 'colorCode',
            },
            {
                headerName: '色称',
                field: 'colorName',
            },
            {
                headerName: '设备编号',
                field: 'machineCode',
            },
            {
                headerName: '重量',
                field: 'canUseWeight',
            },
            {
                headerName: '匹数',
                field: 'canUseHouseNum',
            },
            {
                headerName: '生产交期',
                field: 'productionDate',
            },
            {
                headerName: '毛坯出库日期',
                field: 'tradeName',
            },
            {
                headerName: '班次',
                field: 'yarnCount',
            },
            {
                headerName: '拼缸缸号',
                field: 'yarnNumber',
            },
            {
                headerName: '备注',
                field: 'grayCode',
            },
            {
                headerName: '毛坯出库状态',
                field: 'grayName',
            },
        ];
        const localeTextData: any = ref(localeText);
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }
        const pagination = usePagination(doRefresh);
        const pagingList1: any = ref(pagingList)
        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('outboundInfo01', gridOption, colState, cfsValue)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        return {
            pageLoading,
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            pagingList1,
            table,
            defaultColDef,
            localeTextData,
            gridReady,
            cfsValue,
            selectHandler,
            changHeadShow,
            headerShow,
            total,
            pagination,
            changePage,
            changeSize,
            searchData,
            changePickerDate
        }
    },
    components: { PageTabelLayout,  }
}

</script>

<style scoped>
.main-container {
    height: 100%;
}

.arco-drawer-header .arco-drawer-title {
    width: 100%;
}

.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

.aInputLine {
    border: 1px solid #c9cdd3;
    background: #fff;
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}

</style>